<template>
  <div>
    <el-button type="primary" @click="handleExport">导出excel</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="轮播名称">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="广告链接">
        <template #default="scope">
          <a :href="scope.row.link" target="_blank" rel="noopener noreferrer"
            >点击预览</a
          >
        </template>
      </el-table-column>
      <el-table-column label="图片">
        <template #default="scope">
          <img :src="scope.row.url" alt="" srcset="" style="height: 50px" />
        </template>
      </el-table-column>
      <el-table-column label="是否显示">
        <template #default="scope">
          <el-switch v-model="scope.row.show" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { Timer } from "@element-plus/icons-vue";
import { excelExport2 } from "../../utils/excel-sdk";
export default {
  computed: {
    tableData() {
      return this.$store.state.banner.tableData;
    },
  },
  created() {
    this.$store.dispatch("banner/initBannerAct"); //1. 触发action
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.$router.push({
        path: "/banner/edit",
        query: row,
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleExport() {
      excelExport2(
        this.tableData,
        {
          name: "轮播图名称",
          url: "图片链接",
          link: "超链接",
        },
        "轮播图表格"
      );
    },
  },
};
</script>
